<template>
  <div>
    <el-input v-model="text"  type="textarea"  :rows="8" placeholder="请输入生成图片的关键字已空格隔开，关键字越多越精确，可能生成效果越好" ></el-input>
    <el-select v-model="style" placeholder="请选择生成风格">
      <el-option
              v-for="item in styles"
              :key="item.label"
              :label="item.label"
              :value="item.value">
      </el-option>
    </el-select>
    <el-button type="success" @click="sub">文生图</el-button>
    <el-input v-model="imgurl" placeholder="请输入原始图片路径"></el-input>
    <el-button type="success" @click="sub2">图生图</el-button>
    <div tabindex="0" class="el-upload-video" v-if="imageUrl" >
      <el-image style="width: 600px; height: 600px"
              :src="imageUrl"
              :fit="fit"></el-image>
    </div>
  </div>
</template>

<script>
  export default {
    name: "aiartText",
    data() {
      return {
        text: '',
        style: '',
        imgurl: '',
        styles: [{"label":"日系动漫","value":"201"},{"label":"水墨画","value":"101"},{"label":"概念艺术","value":"102"},{"label":"油画","value":"103"},
          {"label":"水彩画","value":"104"},{"label":"厚涂风格","value":"106"},{"label":"插图","value":"107"},{"label":"剪纸风格","value":"108"},
          {"label":"印象派","value":"109"},{"label":"2.5D人像","value":"110"},{"label":"肖像画","value":"111"},{"label":"黑白素描画","value":"112"},
          {"label":"赛博朋克","value":"113"},{"label":"科幻风格","value":"114"},{"label":"怪兽风格","value":"202"},{"label":"游戏卡通手绘","value":"301"},
          {"label":"不限定风格","value":"000"}
        ],
        // apiHost: 'http://127.0.0.1:9080',
        apiHost: 'http://49.233.23.77:8800',
        imageUrl: '',
        uid:'75624809',
        bucket: 'xcreator-1305103504',
        // bucket: 'gongweiedu-1257784922',
        filePath: 'coshsn',
        arrlist:[]
      };
    },
    mounted() {
    },
    methods: {
      sub(){
        console.log(this.text);
        console.log(this.style);
        let url = this.apiHost+"/ai/text";
        console.log(url);
        this.getRequest(url,{"title":this.text,"style":this.style},{}).then(resp => {
          console.log(resp)
          this.info = JSON.stringify(resp)
          console.log(this.info);
          this.imageUrl = resp.data.url;
          console.log(this.imageUrl);
        })

      },
      sub2(){
        console.log(this.text);
        console.log(this.style);
        console.log(this.imgurl);
        let url = this.apiHost+"/ai/img";
        console.log(url);
        this.getRequest(url,{"title":this.text,"style":this.style,"imgurl":this.imgurl},{}).then(resp => {
          console.log(resp)
          this.info = JSON.stringify(resp)
          console.log(this.info);
          this.imageUrl = resp.data.url;
          console.log(this.imageUrl);
        })

      }
    }
  }
</script>

<style scoped>

</style>